<template>
  <div class="view">
    <!-- 轮播图 -->
    <div class="swiper">
      <van-swipe
        class="my-swipe"
        :autoplay="3000"
        indicator-color="white"
        style="height: 60vw"
      >
        <van-swipe-item>
          <img src="Lbt/lbt1.jpg" alt="" />
        </van-swipe-item>
        <van-swipe-item>
          <img src="Lbt/lbt2.jpg" alt="" />
        </van-swipe-item>
        <van-swipe-item>
          <img src="Lbt/lbt3.jpg" alt="" />
        </van-swipe-item>
      </van-swipe>
    </div>

    <!-- 查找区域 -->
    <div class="saerch">
      <van-field
        is-link
        readonly
        clickable
        :value="valueArea"
        placeholder="请选择所在地区"
        @click="bindShow"
      />

      <van-popup v-model="showArea" position="bottom">
        <van-area
          :area-list="areaList"
          @confirm="onAreaConfirm"
          @cancel="bindCancel"
          columns-num="2"
        />
      </van-popup>

      <!-- 选择日期 -->
      <div>
        <van-row type="flex" justify="space-around" align="center">
          <van-col span="10">
            <van-cell
              title="入住时间"
              :value="datein.format('MM月DD日')"
              @click="DateIn = true"
            />
            <van-calendar
              v-model="DateIn"
              type="range"
              @confirm="onConfirm"
              color="#f5b400"
            />
          </van-col>
          <van-col span="4">
            <div class="dateTotal">{{ day }}晚</div>
          </van-col>
          <van-col span="10">
            <van-cell
              title="离店时间"
              :value="dateout.format('MM月DD日')"
              @click="DateOut = true"
            />
            <van-calendar
              v-model="DateOut"
              type="range"
              @confirm="onConfirm"
              color="#f5b400"
            />
          </van-col>
        </van-row>
      </div>

      <!-- 搜索框 -->
      <van-cell-group>
        <van-field
          v-model="kw"
          placeholder="搜索酒店名称/关键词"
          input-align="center"
        />
      </van-cell-group>

      <!--按钮  -->
      <div class="btn">
        <button @click="query">开始查询</button>
      </div>

      <van-notice-bar
        left-icon="volume-o"
        text="受疫情影响，请您在预订前提前联系酒店确认接待政策，以免影响您的出行。"
      />
    </div>

    <!-- 热门酒店 -->
    <div class="container">
      <van-row type="flex" justify="center">
        <van-col span="7">
          <div class="contentTop">热门 · <span>目的地</span></div>
          <p>旅行就要住优质酒店</p>
        </van-col>
      </van-row>
      <template v-if="home.randomCity.length > 0">
        <van-row type="flex" justify="space-around" class="con">
          <van-col
            span="8"
            v-for="i in home.randomCity"
            :key="i.id"
            class="con"
          >
            <div class="contentBig">
              <router-link :to="`/hotellist?city=${i.hotel_city}&kw=`">
                <img :src="i.city_img" />
              </router-link>
              <span>{{ i.hotel_city }}</span>
            </div>
          </van-col>
        </van-row>
      </template>
      <div class="btn">
        <button @click="getRandomCity">换一批</button>
      </div>
    </div>

    <!-- 热门城市-->
    <div class="container">
      <van-row type="flex" justify="center">
        <van-col span="24">
          <div class="contentTop">热门 · <span>酒店</span></div>
          <p>为你挑选出品质好·服务佳·设施全的目的地</p>
        </van-col>
      </van-row>
      <!-- 内容 -->
      <van-row type="flex" justify="space-around" class="con">
        <van-col
          span="12"
          v-for="i in home.randomHotel"
          :key="i.id"
          class="con"
        >
          <div class="contentMiddle">
            <router-link :to="`/hotel?id=${i.id}`">
              <img :src="i.hotel_img" />
            </router-link>
            <div class="hotelTitle">
              <p>{{ i.hotel_title }}</p>
            </div>
          </div>
        </van-col>
      </van-row>
      <div class="btn">
        <button @click="getRandomHotel">换一批</button>
      </div>
    </div>

    <!-- 热门房型 -->
    <div class="container">
      <van-row type="flex" justify="center">
        <van-col span="7">
          <div class="contentTop">酒店 · <span>房型</span></div>
          <p>旅行就要住优质酒店</p>
        </van-col>
      </van-row>
      <template v-if="home.randomRoom.length > 0">
        <van-row type="flex" justify="space-around" class="con">
          <van-col span="14" class="con">
            <div class="contentBig">
              <router-link :to="`/hotel?id=${home.randomRoom[0].hid}`">
                <img
                  :src="home.randomRoom[0].room_img"
                  style="width: 100%; height: 100%; object-fit: cover"
                />
              </router-link>
              <span>{{ home.randomRoom[0].room_type }}</span>
            </div>
            <div class="contentBig">
              <router-link :to="`/hotel?id=${home.randomRoom[1].hid}`">
                <img
                  :src="home.randomRoom[1].room_img"
                  style="width: 100%; height: 100%; object-fit: cover"
                />
              </router-link>
              <span>{{ home.randomRoom[1].room_type }}</span>
            </div>
          </van-col>
          <van-col span="10" class="con">
            <div class="contentSmall">
              <router-link :to="`/hotel?id=${home.randomRoom[2].hid}`">
                <img
                  :src="home.randomRoom[2].room_img"
                  style="width: 100%; height: 100%; object-fit: cover"
                />
              </router-link>
              <span>{{ home.randomRoom[2].room_type }}</span>
            </div>
            <div class="contentSmall">
              <router-link :to="`/hotel?id=${home.randomRoom[3].hid}`">
                <img
                  :src="home.randomRoom[3].room_img"
                  style="width: 100%; height: 100%; object-fit: cover"
                />
              </router-link>
              <span>{{ home.randomRoom[3].room_type }}</span>
            </div>
            <div class="contentSmall">
              <router-link :to="`/hotel?id=${home.randomRoom[4].hid}`">
                <img
                  :src="home.randomRoom[4].room_img"
                  style="width: 100%; height: 100%; object-fit: cover"
                />
              </router-link>
              <span>{{ home.randomRoom[4].room_type }}</span>
            </div>
          </van-col>
        </van-row>
      </template>
      <div class="btn">
        <button @click="getRandomRoom">换一批</button>
      </div>
    </div>

    <!-- 周边 -->
    <div class="container">
      <van-row type="flex" justify="center">
        <van-col span="24">
          <div class="contentTop">推荐 · <span>周边</span></div>
          <p>为你挑选出品质好·服务佳·设施全的周边</p>
        </van-col>
      </van-row>
      <van-row type="flex" justify="space-around" class="con">
        <van-col
          span="12"
          class="con"
          v-for="item in home.randomAround"
          :key="item.id"
        >
          <router-link :to="`/detail/${item.id}`">
            <div class="content">
              <img :src="`/other/pic/${item.imga.split(',')[0]}`" alt="" />

              <div class="bottom">
                <p class="title">{{ item.maintext }}</p>
                <div
                  class="twospan"
                  style="
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                  "
                >
                  <p class="author">
                    <van-icon name="friends" color="orange" />{{ item.author }}
                  </p>
                  <p class="lookcount">
                    <van-icon name="fire-o" color="orange" />{{ item.rate }}
                  </p>
                </div>
              </div>
            </div>
          </router-link>
        </van-col>
      </van-row>
      <!-- 按钮 -->
      <div class="btn">
        <button @click="getRandomAround">换一批</button>
      </div>
    </div>

    <!-- 底部 -->
    <bottom-tabbar />
  </div>
</template>

<script>
import { areaList } from "@vant/area-data";
import moment from "moment";
import BottomTabbar from "@/components/BottomTabbar.vue";
import AMapLoader from "@amap/amap-jsapi-loader";
import { mapState } from "vuex";

export default {
  components: { BottomTabbar },
  //数据
  data() {
    return {
      areaList,
      active: 0,
      kw: "", //搜索框
      datein: moment(),
      dateout: moment().add(1, "days"),
      DateIn: false,
      DateOut: false,
      showArea: false,
      valueArea: "", //地区值
      arrArea: [], //存放地区数组
    };
  },

  //计算方法
  computed: {
    ...mapState(["home"]),
    day() {
      return moment(this.dateout).diff(moment(this.datein), "days");
    },
  },
  activated() {
    window.scrollTo(0, 0);
  },

  mounted() {
    this.getRandomCity();
    this.getRandomHotel();
    this.getRandomRoom();
    this.getRandomAround();
    this.initMap();
    sessionStorage.setItem("dateIn", this.datein);
    sessionStorage.setItem("dateOut", this.dateout);
  },

  // 方法
  methods: {
    // 随机城市
    getRandomCity() {
      this.$store.dispatch("getRandomCity");
    },

    // 随机酒店
    getRandomHotel() {
      this.$store.dispatch("getRandomHotel");
    },

    //随机房间
    getRandomRoom() {
      this.$store.dispatch("getRandomRoom");
    },
    // 随机周边
    getRandomAround() {
      this.$store.dispatch("getRandomAround");
    },

    //查询酒店列表
    query() {
      let kw = this.kw;
      let address = this.valueArea;
      let city = address.substring(
        address.indexOf("-") + 2,
        address.lastIndexOf("市") + 1
      );
      // console.log(address);

      this.$router.push({
        path: "/hotellist",
        query: { city, kw },
      });

      // sessionStorage.setItem("dateIn", this.datein);
      // sessionStorage.setItem("dateOut", this.dateout);
    },
    // 地区展示
    bindShow() {
      this.showArea = true;
    },
    // 地区选项取消
    bindCancel() {
      this.showArea = false;
    },
    //地区选项选择
    onAreaConfirm(val) {
      this.showArea = false;
      this.arrArea = val;
      let addrInfo = val[0].name + " - " + val[1].name;
      this.valueArea = addrInfo;
    },
    // 确定日期
    onConfirm(date) {
      const [start, end] = date;
      this.DateIn = false;
      this.DateOut = false;
      this.datein = moment(start);
      this.dateout = moment(end);

      sessionStorage.setItem("dateIn", this.datein);
      sessionStorage.setItem("dateOut", this.dateout);
    },
    //定位
    initMap() {
      AMapLoader.load({
        key: "7bfbe3ab215345f405c23b5eed760ca8", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.CitySearch"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          //获取当前城市
          let citySearch = new AMap.CitySearch();

          citySearch.getLocalCity((status, result) => {
            if (status == "complete") {
              // console.log(result)
              let city = result.city;
              let province = result.province;
              // console.log(province, city)
              this.valueArea = `${province} - ${city}`;
              sessionStorage.setItem("city", city);
            }
          });
          // this.valueArea = city
        })
        .catch((e) => {
          console.log(e);
        });
    },
  },
};
</script>

<style scoped lang='scss'>
.view {
  background-color: rgb(248, 248, 248);
  /* border: 2px solid blue; */
}

.swiper img {
  width: 100%;
}

.saerch {
  margin: auto;
  width: 95vw;
  border: 2px solid ghostwhite;
  border-radius: 20px;
  box-shadow: 0 2px 10px 0 rgb(0 0 0 / 20%);
  background-color: #fff;
  margin-top: -2.5rem;
  position: relative;
}

.van-cell {
  font-size: 0.775rem;
  font-weight: 600;
  color: #555;
  align-items: center;
}

.van-cell--clickable {
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}

.btn {
  padding: 1.3rem 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
}

.btn button {
  width: 15.5625rem;
  height: 2.75rem;
  border-radius: 30px;
  border: 0;
  background-color: #f5b400;
  color: white;
}

.btn:active {
  transform: scale(0.95);
}

.dateTotal {
  display: inline-block;
  width: 3.75rem;
  height: 2rem;
  line-height: 2rem;
  text-align: center;
  font-size: 14px;
  border-radius: 10px;
  background-color: #f5b400;
  color: #fff;
}

.container {
  margin-top: 0.625rem;
  background-color: #fff;
  text-align: center;
}

.con {
  padding: 0 1vw;
}

.contentTop {
  margin-top: 0.625rem;
  height: 0.625rem;
  font-weight: 700;
}

.container img {
  border-radius: 8px;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.container span {
  color: #f5b400;
}

.container p {
  font-size: 12px;
  color: #666;
}

.contentBig {
  height: 37vw;
  margin-bottom: 2vw;
  position: relative;
  box-sizing: content-box;
}

.contentMiddle {
  height: 30vw;
  margin-bottom: 2vw;
  position: relative;
  box-sizing: content-box;
}

.contentSmall {
  height: 24vw;
  margin-bottom: 2vw;
  position: relative;
  box-sizing: content-box;
}

.contentBig span,
.contentMiddle span,
.contentSmall span {
  width: 4rem;
  padding: 0.3rem 0;
  // height: 1.25rem;
  // line-height: 1.25rem;
  position: absolute;
  display: inline-block;
  top: 0.625rem;
  left: 0rem;
  font-size: 12px;
  color: #fff;
  font-weight: 600;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  background-color: rgba(0, 0, 0, 0.3);
}

.hotelTitle {
  width: 6rem;
  padding: 0.3rem;
  position: absolute;
  display: inline-block;
  top: 0.625rem;
  left: 0rem;
  font-size: 12px;
  font-weight: 600;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  background-color: rgba(0, 0, 0, 0.3);
  p {
    margin: 0;
    color: #fff !important;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }
}

.content {
  height: 52vw;
  box-shadow: 0 2px 5px 0 rgb(0 0 0 / 20%);
  border: 2px solid ghostwhite;
  border-radius: 3vw;
  background-color: white;
  margin-bottom: 2vw;

  img {
    width: 100%;
    height: 30vw;
  }
  .bottom {
    font-size: 10vw;
    .title {
      margin: 1vw 0;
      font-size: 15px;
      font-weight: bold;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    .twospan {
      margin: 0;
      padding: 0;
      p {
        margin: 0 1vw;
        padding: 1vw;
        text-align: left;
        font-size: 4vw;
        color: #555;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  }
}

::v-deep .van-swipe__indicators {
  bottom: 36px;
}

::v-deep .van-field__control {
  font-size: 16px;
}

::v-deep .van-notice-bar {
  border-radius: 20px;
}
</style>
